<!--
 * @Description: 路侧管理
 * @Author:       zhaixiangjun
 * @Date: 2021-11-02 14:00:49
 * @LastEditors:  zhengxu
 * @LastEditTime: 2021-11-11 17:59:57
-->
<template>
  <BaseOperateTable
    ref="refPage"
    :show-selection="true"
    :header="columns"
    :query-url="queryUrl"
    :delete-url="deleteUrl"
    :data-filter="tabelDataFilter"
    @operate="tableOperate"
    @query="query"
    @reset="resetCondition">
    <template v-slot:condition>
      <div>路侧编号：
        <a-select
          v-model:value="condition.roadSideId"
          :options="roadSideIds"
          :allow-clear="true"
          placeholder="请选择路侧编号"/>
      </div>
      <div>接入RSU编号：
        <a-select
          v-model:value="condition.rsuId"
          :options="rsuIds"
          :allow-clear="true"
          placeholder="请选择接入RSU编号"/>
      </div>
      <div>信号机状态：
        <a-select
          v-model:value="condition.rstatus"
          :options="RSTATUS"
          :allow-clear="true"
          placeholder="请选择信号机状态"/>
      </div>
      <div>信号机类型：
        <a-input
          v-model:value="condition.signalType"
          :allow-clear="true"
          placeholder="请输入信号机类型"/>
      </div>
      <div>信号机编号：
        <a-input
          v-model:value="condition.signalId"
          :allow-clear="true"
          placeholder="请输入信号机编号"/>
      </div>
    </template>
    <template v-slot:operate>
      <a-button
        type="primary"
        @click="addData">添加信号机</a-button>
      <a-button
        type="primary"
        @click="importData">导入信号机</a-button>
      <a-button
        type="primary"
        danger
        @click="batchDelete">删除信号机</a-button>
    </template>
  </BaseOperateTable>
  <BaseFormDialog
    ref="refAddDataDialog"
    :title="dialogTitle"
    :rules="addDataRules"
    :form="addDataForm">
    <template v-slot:coordinate="{state}">
      <a-input-group compact>
        <a-select
          v-model:value="state.coordinateType"
          style="width:34%"
          :options="COORDINATE"
          placeholder="请选择坐标系"
        />
        <a-input
          v-model:value="state.coordinate"
          style="width: 64%;marginLeft: 2%;"
          placeholder="请输入经纬度[120.0000, 30.0000]"/>
      </a-input-group>
    </template>
  </BaseFormDialog>
  <ImportDialog
    v-if="importDialogVisible"
    v-model:visible="importDialogVisible"
    :import-url="importUrl"
    @onSuccess="onImportFileSuccess"/>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import { getRoadSideIds, getRsuList, addSignalInfo, editSignalInfo } from '@/api/roadside/signal'
import { RSTATUS, COORDINATE } from '@/config/roadsideCfg'
import { verifyCoordinate } from '@/utils/coordinate'
import BaseOperateTable from '@/components/BaseOperateTable.vue'
import BaseFormDialog from '@/components/BaseFormDialog.vue'
import ImportDialog from '@/components/roadside/ImportDialog.vue'
import { BasePath } from '@/api/request'

const refPage = ref(null) // 表格实例
const refAddDataDialog = ref(null) // form表单弹窗实例
const dialogTitle = ref('添加信号机') // form表单弹窗标题
const importDialogVisible = ref(false) // 导入弹窗显隐
/** ==========表格模块========== */
const queryUrl = ref(`${BasePath}/signaldevice/page`) // 分页查询接口URL
const deleteUrl = ref(`${BasePath}/signaldevice/`) // 批量删除接口URL
const importUrl = ref(`${BasePath}/signaldevice/upload`)

/** 表格标题栏配置 */
const columns = ref([
  {
    title: '路侧编号',
    dataIndex: 'roadSideId',
    width: 100,
    ellipsis: true
  },
  {
    title: '接入RSU编号',
    dataIndex: 'rsuId',
    width: 100,
    ellipsis: true
  },
  {
    title: '设备序列号',
    dataIndex: 'deviceSn',
    width: 200,
    ellipsis: true
  },
  {
    title: '证书编号',
    dataIndex: 'certSn',
    width: 160,
    ellipsis: true
  },
  {
    title: '交警信号机编号',
    dataIndex: 'signalId',
    width: 160,
    ellipsis: true
  },
  {
    title: '厂商',
    dataIndex: 'manufactor',
    width: 100,
    ellipsis: true
  },
  {
    title: '型号',
    dataIndex: 'model',
    width: 100,
    ellipsis: true
  },
  {
    title: '类型',
    dataIndex: 'signalType',
    width: 160,
    ellipsis: true
  },
  {
    title: '相位集合',
    dataIndex: 'phaseList',
    width: 160,
    ellipsis: true
  },
  {
    title: '坐标',
    dataIndex: 'coordinate',
    width: 200,
    ellipsis: true
  },
  {
    title: '状态',
    dataIndex: 'rstatusLabel',
    width: 100,
    ellipsis: true
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    width: 200,
    ellipsis: true
  },
  {
    title: '操作人',
    dataIndex: 'updateBy',
    width: 100,
    ellipsis: true
  }
])

/** 表格数据过滤 */
const tabelDataFilter = (rows) => {
  const result = []
  rows.forEach((item) => {
    let i = { ...item }
    i.rstatusLabel = RSTATUS[i.rstatus].label
    result.push(i)
  })
  return result
}

/** 表格操作列事件 */
const tableOperate = ({ eventType, data }) => {
  if (eventType === 'edit') {
    dialogTitle.value = '编辑信号机'
    refAddDataDialog.value.setRequest(editSignalInfo, () => {
      refPage.value.query()
    })
    refAddDataDialog.value.setFormData(data)
    refAddDataDialog.value.show()
  }
}

/** ==========查询条件模块========== */
// 查询条件
const condition = reactive({
  roadSideId: undefined,
  rsuId: undefined,
  signalId: undefined,
  rstatus: undefined,
  signalType: undefined
})

const roadSideIds = ref([]) // 路侧编号列表
const signalIds = ref([]) // 信号机编号列表
const rsuIds = ref([]) // RSU编号列表

/** 查询路侧编号列表 */
const queryRoadSideIds = () => {
  getRoadSideIds().then(({ data, resCode, resMsg }) => {
    if (resCode === '00000') {
      roadSideIds.value = (data || []).map(
        ({ roadSideId }) => ({ value: roadSideId, label: roadSideId })
      )
    } else {
      message.error(resMsg)
    }
  })
}
/** 查询RUS编号列表 */
const queryRSUIds = () => {
  getRsuList().then(({ data, resCode, resMsg }) => {
    if (resCode === '00000') {
      rsuIds.value = (data || []).map(({ rsuId }) => ({ value: rsuId, label: rsuId }))
    } else {
      message.error(resMsg)
    }
  })
}
/** 重置条件 */
const resetCondition = () => {
  condition.roadSideId = undefined
  condition.rstatus = undefined
  condition.rsuId = undefined
  condition.signalType = undefined
  condition.signalId = undefined
}

/** 点击查询按钮后，进行表格查询 */
const query = () => {
  refPage.value.queryByCondition(condition, true)
}

queryRoadSideIds()
queryRSUIds()

/** =========操作按钮模块========== */
/** 添加数据 */

const addData = () => {
  dialogTitle.value = '添加信号机'
  let data = {}
  addDataForm.value.forEach(({ key, value }) => {
    data[key] = value
  })
  refAddDataDialog.value.setRequest(addSignalInfo, () => {
    resetCondition()
    refPage.value.resetQuery()
  })
  refAddDataDialog.value.setFormData(data)
  refAddDataDialog.value.show()
}

/** 导入数据  */
const importData = () => {
  importDialogVisible.value = true
}

/** 导入数据成功后 */
const onImportFileSuccess = () => {
  importDialogVisible.value = false
  resetCondition()
  refPage.value.resetQuery()
}

/** 批量删除 */
const batchDelete = () => {
  refPage.value.deleteSelectedRows()
}

/** ========== 表单模块 ========== */

// 表单的配置
const addDataForm = ref([
  { key: 'roadSideId', value: undefined, label: '路侧编号', options: roadSideIds, type: 'select' },
  { key: 'rsuId', value: undefined, label: '接入RSU编号', options: rsuIds, type: 'select' },
  { key: 'deviceSn', value: undefined, label: '设备序列号' },
  { key: 'certSn', value: undefined, label: '证书编号' },
  { key: 'signalId', value: undefined, label: '交警信号机编号' },
  { key: 'manufactor', value: undefined, label: '厂商', placeholder: '请输入厂商名称' },
  { key: 'model', value: undefined, label: '型号', placeholder: '请输入信号机型号' },
  { key: 'signalType', value: undefined, label: '类型', placeholder: '请输入信号机类型' },
  { key: 'phaseList', value: undefined, label: '相位集合', placeholder: '请输入信号机相位集合' },
  { key: 'coordinate', value: undefined, label: '坐标', custom: true },
  { key: 'coordinateType', value: undefined, ignore: true },
  { key: 'rstatus', value: undefined, label: '状态', type: 'select', options: RSTATUS, placeholder: '请选择信号机状态' }
])
// 表单校验规则
const addDataRules = reactive({
  roadSideId: [
    { required: true, message: '请选择路侧编号', trigger: 'blur' }
  ],
  signalId: [
    { required: true, message: '请输入交警信号机编号', trigger: 'blur' }
  ],
  manufactor: [
    { required: true, message: '请输入厂商名称', trigger: 'blur' }
  ],
  model: [
    { required: true, message: '请输入信号机型号', trigger: 'blur' }
  ],
  signalType: [
    { required: true, message: '请输入信号机类型', trigger: 'blur' }
  ],
  coordinate: [
    { required: true, message: '请输入通信类型', trigger: 'blur' }
  ],
  rstatus: [
    { required: true, message: '请选择信号机状态', type: 'number', trigger: 'blur' }
  ]
})

// 表单coordinate属性自定义校验规则
function coordinateRules (rule, value, callback) {
  if (!refAddDataDialog.value.getFormData().coordinateType) {
    callback(new Error('请选择坐标系类型'))
    return
  }
  if (!verifyCoordinate(value)) {
    callback(new Error('经纬度填写格式错误'))
    return
  }
  callback()
}
</script>
<script>
export default {
  name: 'signal'
}
</script>